import React from 'react'
import { Input, message, Table } from 'antd'
import { fetchPost } from '../../../utils/request'

const EditableCell = ({ editable, value, onChange }) => (
  <div>
    {editable
      ? <Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
      : value
    }
  </div>
);
class Index  extends  React.Component{


  constructor (props) {
    super(props)
    this.columns = [{
      title: 'Auditor',
      dataIndex: 'auditor',
    }, {
      title: 'Automatic daily order distribution',
      dataIndex: 'baseOrderNum',
      render: (text, record) => this.renderColumns(text, record, 'baseOrderNum'),
    }, {
      title: 'Manual daily order distribution',
      dataIndex: 'dailyManualOrderNum',
      render: (text, record) => this.renderColumns(text, record, 'dailyManualOrderNum'),
    }, {
      title: 'operation',
      dataIndex: 'operation',
      render: (text, record) => {
        const { editable } = record;
        return (
          <div className="editable-row-operations">
            {
              editable ?
                <span>
                  <a onClick={() => this.save(record.key)}>Save</a>
                  <a style={{marginLeft:10}} onClick={() => this.cancel(record.key)}>Cancel</a>
                </span>
                : <a onClick={() => this.edit(record.key)}>Edit</a>
            }
          </div>
        );
      },
    }];
    this.state={
      data:[]
    }

  }
  componentDidMount () {
  this.getData();
  }
  // 获取表格数据
  getData () {
    fetchPost('/audit/config/list').then((res) => {
      if (res.code === 0) {
        if (res.data !== null) {
          this.setState({
            data: res.data.list,
          })
          this.cacheData = this.state.data.map(item => ({ ...item }));
        }
      } else {
        message.error(res.msg)
      }
    })
  }
  // 保存配置
  saveConfig (params) {
    fetchPost('/audit/config/save',params).then((res) => {
      if (res.code === 0) {
        message.info(res.msg)
      } else {
        message.error(res.msg)
      }
      this.getData()
    })
  }
  renderColumns(text, record, column) {
    return (
      <EditableCell
        editable={record.editable}
        value={text}
        onChange={value => this.handleChange(value, record.key, column)}
      />
    );
  }
  handleChange(value, key, column) {
    const newData = [...this.state.data];
    const target = newData.filter(item => key === item.key)[0];
    if (target) {
      target[column] = value;
      this.setState({ data: newData });
    }
  }
  edit(key) {
    const newData = [...this.state.data];
    const target = newData.filter(item => key === item.key)[0];
    if (target) {
      target.editable = true;
      this.setState({ data: newData });
    }
  }
  save(key) {
    const newData = [...this.state.data];
    const target = newData.filter(item => key === item.key)[0];
    if (target) {
      delete target.editable;
      console.log(target)
      this.saveConfig(target)
      this.setState({ data: newData });
      this.cacheData = newData.map(item => ({ ...item }));
    }
  }
  cancel(key) {
    const newData = [...this.state.data];
    const target = newData.filter(item => key === item.key)[0];
    if (target) {
      Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
      delete target.editable;
      this.setState({ data: newData });
    }
  }
  render () {
    return <Table bordered dataSource={this.state.data} columns={this.columns} rowKey='auditorId'  />;
  }
}
export default Index
